<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
	    <meta content="telephone=no" name="format-detection" />
		<title>亲友圈</title>
		<link href="{{asset('/mobile/css/style.css')}}" rel="stylesheet" type="text/css">
	</head>
	<style type="text/css">
		body{
			background-color: #F1F1F1;
		}
		input{
			border: none;
			outline: none;
		}
		.tab-wrap{
			display: flex;
		}
		.tab{
			background-color: #FFFFFF;
			color: #000000;
			flex: auto;
			text-align: center;
			padding: 15px 0;
			border-bottom: 2px solid #D5D5D5;
		}
		.tab.active{
			color: #D9543B;
			border-bottom: 2px solid #D9543B;
		}
		.list{
			display: flex;
			padding: 15px 0;
			text-align: center;
			border-bottom: 1px solid #D5D5D5;
			font-size: 0.9rem;
			background-color: #FFFFFF;
		}
		.li{
			flex: 0 0 20%;
			position: relative;
		}
		.verti{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
		}
		.portrait{
			width: 3rem;
			height: 3rem;
			border-radius: 50%;
		}
		.name{
			margin-top: 5px;
		}
		.small{
			font-size: 0.9rem;
		}
		.money{
			font-size: 0.7rem;
		}
		.look{
			height: 1.5rem;
		}
		#con2{
			display: none;
		}
		.btn_tong{
			margin-bottom: 5px;
		}
		
	</style>
	<body>
		<div class="tab-wrap">
			<div class="tab active" data-type="0">圈内玩家</div>
			<div class="tab" data-type="1">待审核玩家</div>
		</div>
		<div id="con1">
			<div class="list">
				<div class="li">玩家ID</div>
				<div class="li">昵称</div>
				<div class="li">头像</div>
				<div class="li">通过时间</div>
				<div class="li">操作</div>
			</div>
			@foreach($members as $member)
				<div class="list small">
					<div class="li"><div class="verti">{{$member->userid}}</div></div>
					<div class="li money"><div class="verti">{{base64_decode($member->user->name)}}</div></div>
					<div class="li">
						<img class="portrait" src="{{$member->user->headimg}}"/>
					</div>
					<div class="li money">
						<div class="verti">{{date('Y-m-d H:i:s', $member->join_time)}}</div>
					</div>
					<div class="li goTi" data-id="{{$member->id}}">
						<div class="verti remove-act"><img class="look" src="{{asset('/imgs/btn_ti.png')}}"/></div>
					</div>
				</div>
			@endforeach
		</div>
		<div id="con2">
			<div class="list">
				<div class="li">玩家ID</div>
				<div class="li">昵称</div>
				<div class="li">头像</div>
				<div class="li">申请时间</div>
				<div class="li">操作</div>
			</div>
			@foreach($applys as $apply)
				<div class="list small">
					<div class="li"><div class="verti">{{$apply->userid}}</div></div>
					<div class="li money"><div class="verti">{{base64_decode($apply->user->name)}}</div></div>
					<div class="li">
						<img class="portrait" src="{{$apply->user->headimg}}"/>
					</div>
					<div class="li money">
						<div class="verti">{{date('Y-m-d H:i:s', $apply->join_time)}}</div>
					</div>
					<div class="li goLook" data-id="{{$apply->id}}">
						<div class="verti">
							<img class="look btn_tong goTong pass-act" data-id="1" src="{{asset('/imgs/btn_tong.png')}}"/>
							<img class="look goJu reject-act" data-id="1" src="{{asset('/imgs/btn_ju.png')}}"/>
						</div>
					</div>
				</div>
			@endforeach
		</div>
		
	<script type="text/javascript" src="{{asset('/mobile/js/jquery-1.8.3.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('/js/Inertia.js')}}"></script>
    <script type="text/javascript" src="{{asset('/js/backHome.js')}}"></script>	
	<script type="text/javascript">
		$('.tab').on('click', function() {
			$(this).addClass('active')
			$(this).siblings().removeClass('active')	
			var type = $(this).attr('data-type')
			if (type == 0) {
				console.log('点击的圈内玩家')
				$('#con1').show()
				$('#con2').hide()
			} else {
				console.log('点击的待审核玩家')
				$('#con2').show()
				$('#con1').hide()
			}
		})
		/*通过审核*/
		$('.pass-act').click(function(){
			var act_res = confirm('是否通过审核'),
				that = $(this),
				id = that.parents('.goLook').attr('data-id');
			if (act_res) {
		        $.ajax({
		            type: "get",
		            dataType: "json",
		            url: '/mobile/agent/friend_circle/audit/'+id,
		            data: {
		                result: 10
		            },
		            success: function (data) {
		                if (data.flag) {
		                    that.parents('.small').remove();
		                } else {
		                   	alert(data.msg);
		                }
		            }
		        });
			}
		});
		/*拒绝审核*/
		$('.reject-act').click(function(){
			var act_res = confirm('是否拒绝审核'),
				that = $(this),
				id = that.parents('.goLook').attr('data-id');
			if (act_res) {
		        $.ajax({
		            type: "get",
		            dataType: "json",
		            url: '/mobile/agent/friend_circle/audit/'+id,
		            data: {
		                result: 1
		            },
		            success: function (data) {
		                if (data.flag) {
		                    that.parents('.small').remove();
		                } else {
		                   	alert(data.msg);
		                }
		            }
		        });
			}
		});
		/*移除用户*/
		$('.remove-act').click(function(){
			var act_res = confirm('是否将用户移出亲友圈?'),
				that = $(this),
				id = that.parent('.goTi').attr('data-id');
			if (act_res) {
		        $.ajax({
		            type: "get",
		            dataType: "json",
		            url: '/mobile/agent/friend_circle/remove/'+id,
		            data: {},
		            success: function (data) {
		                if (data.flag) {
		                    that.parents('.small').remove();
		                } else {
		                   	alert(data.msg);
		                }
		            }
		        });	
			}	
		});
		
	</script>
	</body>
</html>
